<template>
    <div class="EchartPractice">
        <div ref="main" id="main"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";
export default {

    name: "EchartPractice",
    methods: {
        drawChart() {
            let myEchart = echarts.init(this.$refs.main);
            //1.ECharts最基本的代码结构
            //2．x轴数据:[ '1月', '2月','3月','4月','5月', '6月','7月','8月','9月','10月','11月','12月']
            //3.y轴数据:[ 3000,2800,900,1000,800,700,1400,1300,900,1000,800,600]
            //4．将type的值设置为line
            var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            // var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
            var yDataArr = [3006, 3008, 3005, 3000, 3000, 3006, 3018, 3055, 3090, 3003, 3001, 3011,]

            // var yDataArr1 = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
            // var yDataArr2 = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
            let option = {
                title: {
    text: '2023年度售票量',
    left: 'center',
  },
                xAxis: {
                    type: 'category',
                    data: xDataArr,
                    boundaryGap: false,// 设置紧挨边缘（y轴） false紧挨，默认为true不紧挨
                },
                yAxis: {
                    type: 'value',
                    scale: true // 脱离零值比例(y轴自适应缩放)

                },
                series: [
                    {
                        name: '康师傅销量',
                        data: yDataArr,
                        type: 'line',// 类型为折线图
                        markPoint: { // 设置最大最小值
                            data: [{
                                type: 'max'
                            },
                            {
                                type: 'min'
                            }
                            ]
                        },
                        markLine: { // 设置平均值
                            data: [{
                                type: 'average'
                            }

                            ]
                        },
                        // markArea: { // 设置标注区间
                        //     data: [ // 数组中包含数组，每个数组中分别为对象，多个对象为区间
                        //         [{
                        //             xAxis: '1月'
                        //         }, {
                        //             xAxis: '2月'
                        //         }],
                        //         [{
                        //             xAxis: '7月'
                        //         }, {
                        //             xAxis: '8月'
                        //         }]
                        //     ]
                        // },
                        smook: true, // 设置是否平滑显示
                        lineStyle: {// 设置折线 线的样式
                            color: 'green',
                            type: 'dottet' // 实线
                        },
                        areaStyle: { // 设置填充区域风格
                            color: 'pink' // 粉色
                        },

                    },
                    // {
                    //     name: '白象销量',
                    //     data: yDataArr1
                    // },
                    // {
                    //     name: '老坛销量',
                    //     data: yDataArr2
                    // },
                ]
            };
            myEchart.setOption(option);
        }
    },
    mounted() {
        this.drawChart();
    }
}
</script>

<style scoped>
#main {
    width: 600px;
    height: 400px;
    margin: auto;
    margin-top: 100px
}
</style>

